<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="1400px">
            <el-table v-loading="loading" :data="tableData" border script>
              <el-table-column label="采购批次号" prop="contract_number" min-width="160" show-overflow-tooltip></el-table-column>
              <el-table-column label="采购单号" prop="purchase_code" min-width="160" show-overflow-tooltip></el-table-column>
              <el-table-column label="SPU" prop="spu" min-width="120" show-overflow-tooltip></el-table-column>
              <el-table-column label="供应商" prop="supply_name" min-width="220" show-overflow-tooltip></el-table-column>
              <el-table-column label="抽检数量" prop="check_nums" min-width="120" show-overflow-tooltip></el-table-column>
              <el-table-column label="次品数量" prop="unqualified_nums" min-width="120" show-overflow-tooltip></el-table-column>
              <el-table-column label="次品率" prop="defective_rate" min-width="120" show-overflow-tooltip></el-table-column>
              <el-table-column label="附件图片" prop="attachment_images" min-width="100">
                    <template slot-scope="scope">
                        <ImageUploadImg v-model="scope.row.attachment_images" :readOnly="true"></ImageUploadImg>
                    </template>
                </el-table-column>
              <el-table-column label="次品描述" prop="defective_desc" min-width="220" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" min-width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="showDetailDialog(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList" />
        
        <detail-dialog v-model="detailDialog.visible" v-if="detailDialog.visible" :params="detailDialog.data" @success="handleQuery"></detail-dialog>
      
  </el-dialog>
</template>

<script>
import { getDefectiveInfo } from '@/api/purchase'
import DetailDialog from './DefectiveInfoDetailDialog.vue'
export default {
  name: 'DefectiveInfoListDialog',
  components: { DetailDialog },
  props: {
      value: {
          type: Boolean,
          default: false,
          required: true,
      },
      params: {
          type: Object,
          default: () => {},
      },
  },
  data() {
      return {
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 表格数据
          tableData: [],

          pageInfo: {
              page: 1,
              limit: 10,
          },
          // 查询参数
          queryParams: {},
          detailDialog: {
              visible: false,
              data: {},
          },
      }
  },
  computed: {
      title() {
          return `次品详情列表`
      },
      dialogVisible: {
          get() {
              return this.value
          },
          set(val) {
              this.$emit('input', val)
          },
      },
  },
  watch: {
      params: {
          handler(val) {
              if (val.purchase_code) {
                  this.getList()
              }
          },
          immediate: true,
          deep: true,
      },
  },
  created() {},
  methods: {
      showDetailDialog(row) {
          this.detailDialog.visible = true
          this.detailDialog.data = row
      },
   //列表
      getList() {
          this.loading = true
          const qyparams = {
              ...this.pageInfo,
              purchase_code: this.params.purchase_code,
          }
          getDefectiveInfo(qyparams)
              .then(response => {
                  this.tableData = response.data.list
                  this.tableData.map(item => {
                      item.product_images = item.product_images?.replaceAll('\\', '')
                      return { ...item }
                  })
                  this.total = response.data.total
                  this.total_inventory_quantity = response.data?.total_inventory_quantity ?? 0
                  this.total_not_send_quantity = response.data?.total_not_send_quantity ?? 0
                  this.total_on_way_quantity = response.data?.total_on_way_quantity ?? 0
                  this.total_all_inventory_quantity = response.data?.total_all_inventory_quantity ?? 0
              })
              .finally(() => {
                  this.loading = false
              })
      },

      // 搜索按钮操作
      handleQuery() {
          this.pageInfo.page = 1
          this.getList()
      },

      // 重置按钮操作
      resetQuery() {
          this.resetForm('queryForm')

          this.handleQuery()
      },
  },
}
</script>

<style>
.total-warp {
  font-size: 18px;
  font-weight: bold;
  padding: 8px 0 16px 0;
}
</style>
